<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <home /> -->
  <button @click="addnum">增加</button>
  <!-- 动态切换组件   根据内置的component组件  is来选择对应的组件  -->
  <div><button @click="choseComponent">切换动态组件</button></div>
  <component :is="com" />

  <!-- 作用域插槽 -->
  <tabbar :list="navlist">
    <!-- v-slot:nav="slotProps" 以下为简写 -->
    <template #nav="slotProps">
      <button>
        {{ slotProps.item }}--{{ slotProps.index }}--{{ slotProps.message }}
      </button>
    </template>
  </tabbar>
  <!-- 当使用组件中的插槽，插入的内容独占插槽时  可写为 -->
  <!-- 比如当组件中 有俩个插槽时  实际使用的只有一个  便可简写 -->
  <!-- <tabbar :list="navlist" #nav="slotProps">
        <button>{{ slotProps.item }}</button>
      </tabbar>
  -->
  <AsyicComponent />

</template>

<script>
import home from "./views/home.vue";
import about from "./views/about.vue";
import proflie from "./views/profile.vue";
import tabbar from "./components/tabbar.vue";
import committer from "./utils/mitter";
import { computed } from "vue";

// 直接引入
import AsyicComponent from "./views/AsyicComponent.vue";

import { defineAsyncComponent } from "vue";

// 对webpack打包时  进行分包
defineAsyncComponent({
  loader: () => import("./views/AsyicComponent.vue"),
  // loadingComponent    异步加载的组件没有加载的时候，当需要一个组件去占位  就可以使用loadingComponent
  // errorComponent   加载错误时加载的组件
  // delay   在显示loadingCoponent 加载之前等待的时间
  // 监听加载错误的回调
  onError: (error, retry, fail, attempts) => {
    console.log(error);
    // error  错误信息
    // retry   是否尝试重新加载   retry()
    //  attempts 尝试的次数
  },
});

export default {
  name: "App",
  components: {
    home,
    tabbar,
    about,
    proflie,
    AsyicComponent,
  },
  created() {
    committer.on("btnclick", info => {
      console.log(info);
    });
    //监听所有的事件
    // 第一个参数是事件的名称  第二个是事件发出来的参数
    committer.on("*", (type, info) => {
      console.log(type);
      console.log(info);
    });
  },
  data() {
    return {
      list: [1, 2, 3],
      navlist: ["主页", "个人中心", "分类"],
      componentlist: ["home", "about", "proflie"],
      com: "home",
    };
  },
  // provide: {
  //   name: "跨组件通信",
  // },
  provide() {
    //当需要使用this指向时   可以将provide写成一个函数  将对应的数据return出去
    return {
      name: "跨组件通信",
      // list: this.list,
      // vue3 引入的computed函数返回的是一个ref的对象
      // 当需要跨组件传数据时   当前组件的data实现响应式时  需要用computed
      list: computed(() => this.list),
    };
  },
  methods: {
    addnum() {
      this.list.push(4);
      console.log(this.list);
    },
    choseComponent() {
      this.com =
        this.componentlist[
          Math.floor(Math.random() * (Math.floor(2) - Math.ceil(0) + 1)) +
            Math.ceil(0)
        ];
      console.log(this.com);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
